<template>
  <view>
    <top-tabbar tabTitle="年课" :titleStatus="tabHeader" :class="tabHeader ? '' : 'tabHeaderBack'"  @click="backClick"></top-tabbar>
   <view class="experience">
    <view class="experImg">
      <image :src="iosyearclass" mode="widthFix"></image>
    </view>
   </view>
   <view class="footer">
     <view class="btnget" @click="promptlyGet">立即领取</view>
   </view>
  </view>
</template>

<script>
  import topTabbar from '@/components/topTabbar/index.vue'
  export default {
    components: {
      topTabbar
    },
    data() {
      return {
        tabHeader: true, // 顶部标题状态
        fromPary:{
          phone:''
        },
        pathUrl:'',
        iosyearclass: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/ios/iosyearclass.jpg'
      }
    },
    onLoad(params) {
      const vm = this
      vm.pathUrl = window.location.href.split('?')[1]
      if(vm.$auth.getUrlPrams("phonenumber")) {
        vm.fromPary.phone = vm.$auth.getUrlPrams("phonenumber")
      }
       vm.$wechat.unseBehavior()
    },
     onPageScroll(e) {
      // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
      if(e.scrollTop < 50) {
         this.tabHeader = true
      }
      if(e.scrollTop> 50){
        this.tabHeader = false
      }
    },
    methods:{
      promptlyGet() {
        const vm = this
        uni.navigateTo({
          url: '/pages/my/order/iosPayment?phone='+vm.fromPary.phone+'&'+vm.pathUrl
        })
      },
      // 返回上一页
      backClick() {
        uni.navigateBack({})
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .top-tabbar-wrap{
     width: 100%;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 10;
     background: #FFFFFF;
   }
   .tabHeaderBack{
     background: rgba(0,0,0,0.3);
   }
  .experImg{
    margin-top: 176rpx;
    width: 100%;
    display: block;
     padding-bottom: 120rpx;
  }
  .footer{
    width: 750rpx;
    height: 120rpx;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(20rpx);
    -webkit-backdrop-filter: blur(20rpx);
    -moz-backdrop-filter: blur(20rpx);
    -ms-backdrop-filter: blur(20rpx);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: env(safe-area-inset-bottom);
    .btnget{
       width: 680rpx;
       padding: 6rpx 0;
       border-radius: 44rpx;
       font-weight: bold;
       background: #FF800C;
       font-weight: bold;
       font-size: 48rpx;
       text-align: center;
       color: #FFFFFF;
       letter-spacing: 0.2em;
       animation-fill-mode: both;
       animation: btnget 1s infinite 1s;
    }
     @keyframes btnget {
        0% { transform: scale(1,1);}
        50% { transform: scale(0.97,0.97);}        
        100% { transform: scale(1,1);}
      }
  }
</style>
